<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="fn">点击翻转字符串,同时转成大写</button>
    <button @click="fn1">点击翻转字符串,同时转成小写</button>
  </div>
</template>

<script>
//重复的逻辑进行函数的封装
function reverse(str) {
  return str.split('').reverse().join('')
}

export default {
  data() {
    return {
      msg: 'hello world',
    }
  },
  methods: {
    //1.字符串转成数组-->2.数组翻转-->3.翻转后的结果转回字符串
    //hello world-->split-->['h','e','l','l','o',...]-->reverse-->['d','l','r','o','w',...]-->join-->dlrow olled
    //toUpperCase() 字符串转成大写
    //toLowerCase() 字符串转成大写
    fn() {
      this.msg = reverse(this.msg).toUpperCase()
    },
    fn1() {
      this.msg = reverse(this.msg).toLowerCase()
    },
  },
}
</script>

<style></style>
